<template>
  <div class="Search">
    <span class="el-icon-zoom-in"></span>
    <input
      type="text"
      v-model="value"
      placeholder="请输入搜索的内容"
      class="ipt"
      @keydown.enter="enter(value)"
    />
    <router-link to="/">
      <span class="p">取消</span>
    </router-link>
    <div class="hot">
      <p>热门搜索</p>
      <ul>
        <li v-for="(item, index) in list" :key="index">
          <router-link
            :to="{
              path: '/national/' + item.keyword,
            }"
          >
            <p class="p1">{{ item.keyword }}</p>
          </router-link>
        </li>
      </ul>
    </div>
    <div v-show="isShow" @keydown.enter="enter">
      <span class="searchTitle">历史搜索</span>
      <div v-for="(item,index1) in oldssarr" :key="index1" class="taro-div">
        <router-link to="">
          <div class="searchItem">{{item}}</div>
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      value: "",
      oldssarr:[],
      isShow: false,
    };
  },
  created() {
    this.$ajax
      .get("/abc/template/getRecommendKeyword.do?_dataType=json")
      .then((res) => {
        this.list = res.data.body.data;
        // console.log(this.list);
      });
  },
  methods: {
    enter(value) {
      this.$router.push("/national/" + value);
      this.oldssarr.push(this.value)
      this.value = "";
      this.isShow = true;
    },
  },
};
</script>
<style scoped>
.Search {
  background-color: #fff;
  height: 840px;
  width: 102%;
}
.ipt {
  width: 76%;
  height: 40px;
  background-color: #eee;
  border-radius: 10px;
  border: none;
  outline: none;
  padding-left: 30px;
  position: relative;
  left: -17px;
  margin-top: 20px;
}
.el-icon-zoom-in {
  display: inline-block;
  color: #333;
  font-size: 20px;
  position: absolute;
  top: 30px;
  left: 19px;
  z-index: 99;
}
ul {
  list-style: none;
  display: flex;
}
.p {
  width: 32px;
  position: absolute;
  top: 28px;
  right: 1px;
}
.hot {
  text-align: left;
  margin-top: 20px;
}
.hot .p1 {
  width: 50px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #eee;
  border-radius: 10px;
  margin-right: 15px;
}
</style>